<?
include 'php/functions.php';

$output = "
	<html>
		<head>	 	
			<!-- browse Window -->

		</head>
		<body>
			<script>
				function query(cnt, fil, dir){
					var params = {	user: $('#user').val() 
									,slevel: $('#slevel').val()
									,elevel: $('#elevel').val() 
									,job: $('#job').val()
									,amount: cnt
									,filter: fil
									,direction: dir
								};
					/*$('#search-results').html('<img style=\"margin-left: 384px;margin-top: 256px;\" src=\"media/loader.gif\"></img>');
					
					$('#search-results').load('php/query.php?".time()."', params, function(response, status, xhr) {
					  if (status == 'error') {
						var msg = 'Sorry but there was an error: ';
						$('#search-results').html(msg + xhr.status + ' ' + xhr.statusText);
					  }
					});*/
					
					$('#search-results-out').css({height: $('#spec-comments').height()});
					// fade out inner div
					$('#search-results').fadeOut('fast' , function(){
						// change the div content
						$('#search-results').html('<img style=\"margin-left: 384px;margin-top: 256px;\" src=\"media/loader.gif\"></img>');
						$('#search-results').fadeIn('fast');
						
						$('#search-results').load('php/query.php?".time()."', params, function(response, status, xhr) {
						  if (status == 'error') {
							var msg = 'Sorry but there was an error: ';
							$('#search-results').html(msg + xhr.status + ' ' + xhr.statusText);
						  }else{
							$('#search-results-out').animate({height: $('#search-results').height()}, function(){
								// show the inner div
								$('#search-results').fadeIn('fast');
							});
						  }
						});
					});
				}
				
				$(document).ready(function(){
					query(\"\", \"\", \"\");
				});
				
			</script>
			<div class = 'content-title-container'>
				<div class='normal-text grey-text content-title-text fl-left'>Browse</div>
			</div>
			<div id='indent-content-container' class='me-content-container'>
				<div id='mask-content-container' class='fl-left'>
					<div class = 'content-subtitle-container-left fl-left' style='height: 125px;'></div>
					<div class='fl-right'>
						<div id='search-mask' class='fl-left' style='width: 763px;'>
						<!-- FILTER -->
							<form method='POST' action='javascript:query(\"\", \"\", \"\");'>
								<div class='fl-left' style='height: 64px; padding-top: 15px; padding-left: 10px;'>	
									<table>
										<tr>
											<td class='td-table vertical-middle' style='width: 90px;'>
												<div class='normal-text bold-text pad-l-50'>User:</div>
											</td>
											<td colspan='3'>
												<input id='user' type='text' style='width:200px'>
											</td>
										</tr>
										<tr>
											<td class='td-table vertical-middle'>
												<div class='normal-text bold-text pad-l-50'>Level:</div>
											</td>
											<td>
												<select id='slevel' name='slevel' size='1' class='select'>";
													$i = 1;
													while ($i<51){
														$output .= "<option value='".$i."'";
														if($i==1){
															$output .= " selected ";
														}
														$output .= ">".$i."</option>";
														$i++;
													}
												$output .= "</select>
											</td>
											<td>
												<div class='normal-text bold-text ' style='padding:10px;'> - </div>
											</td>
											<td>
												<select id='elevel' name='elevel' size='1' class='select' >";
													$i = 1;
													while ($i<51){
														
														$output .= "<option value='".$i."'";
														if($i==50){
															$output .= " selected ";
														}
														$output .= ">".$i."</option>";
														$i++;
													}
												$output .= "</select>
											</td>
										</tr>
										<tr>
											<td class='td-table vertical-middle'>
												<div class='normal-text bold-text pad-l-50'>Class:</div>
											</td>
											<td colspan='3'>
												<select id='job' size='1'  class='select' style='width:200px'>
													<option id='-1' value='none'></option>";
													foreach (get_jobs() as $id => $class){
														$output .= "<option id='".$id."' value='".$class."'>".$class."</option>";
													}
												$output .= "</select>
											</td>
										</tr>
									</table>
								</div>
								<div style='clear:both;'></div>
								<div>
									<div class='fl-right'>
										<input id='reset-button' type='reset' value='Reset' style='cursor:pointer;'/>
										<input id='search-button' type='submit' value='Search' style='cursor:pointer;'/>
										
									</div>
								</div>
							</form>
						</div>	
						<div class = 'content-subtitle-container-right fl-right' style='height: 125px;'></div>
					</div>
				</div>
				<div style='clear:both; height:5px;'></div>
				<div id='result-content-container' class='result-content-container' style='padding-top: 5px;'> 
					<div class='content-subtitle-container-open'></div>
						<div id='search-results-out' style='min-height:528px;'>
							<div id='search-results' >

							</div>
							<div style='clear:both;'></div>
						</div>
						<div style='clear:both;'></div>
					<div class='content-subtitle-container-close'></div>
					<div style='clear:both;'></div>
				</div>
			</div>
		</body>
	</html>";
		
echo $output;
?>


		
